import React, { useEffect, useState } from 'react';
import Form from 'antd/es/form';
import { FormComponentProps } from 'antd/lib/form';
import { Input, message, Modal, Select, Spin, TreeSelect } from 'antd';
import { ConnectState } from '@/models/connect';
import { connect } from 'dva';
import apis from '@/services';
import { DeviceAep } from '../data.d';
import { router } from 'umi';
import encodeQueryParam from '@/utils/encodeParam';


interface DeviceProductType {
  text: string;
  value: string;
}
interface Props extends FormComponentProps {
  close: Function;
  save: Function;
  data: Partial<DeviceAep>;
}

interface State {
  productList: DeviceProductType[];
  organizationList: any[];
}

const Save: React.FC<Props> = props => {
  const initState: State = {
    productList: [{
      text: '门磁',
      value: 'mc'
    }],
    organizationList: [],
  };
  const [productList, setProductList] = useState(initState.productList);
  // 消息协议
  // const [organizationList, setOrganizationList] = useState(initState.organizationList);
  const [loading, setLoading] = useState<boolean>(false);
  const {
    form: { getFieldDecorator },
    form,
  } = props;
  const submitData = () => {
    form.validateFields((err, fileValue) => {
      if (err) return;

      preservation({
        ...fileValue,
      });
    });
  };

  const preservation = (item: any) => {
    if (props.data.id) {
      apis.deviceAep
        .saveOrUpdate(item)
        .then((response: any) => {
          if (response.status === 200) {
            message.success('保存成功');
            props.close();
            props.save();
            // router.push(`/device/instance/save/${item.id}`);
          }
        })
        .catch(() => {});
    } else {
      apis.deviceAep
        .saveDevice(item)
        .then((response: any) => {
          if (response.status === 200) {
            message.success('创建成功');
            props.close();
            props.save();
            // router.push(`/device/instance/save/${item.id}`);
          }
        })
        .catch(() => {});
    }
  };

  // const queryOrganization_children = (params: any) => {
  //   apis.deviceProdcut.queryOrganization_children(encodeQueryParam(params))
  //     .then((data: any) => {
  //       if (data.status === 200) {
  //         let orgList: any = [];
  //         data.result.map((item: any) => {
  //           orgList.push({id: item.id, pId: item.parentId, value: item.id, title: item.name})
  //         });
  //         setOrganizationList(orgList);
  //       }
  //       setLoading(false);
  //     })
  //     .catch(() => {
  //     });
  // };

  // const queryOrganization = () => {
  //   apis.deviceProdcut.queryOrganization()
  //     .then((res: any) => {
  //       if (res.status === 200) {
  //         let orgList: any = [];
  //         res.result.map((item: any) => {
  //           orgList.push({id: item.id, pId: item.parentId, value: item.id, title: item.name})
  //         });
  //         setOrganizationList(orgList);
  //       }
  //       setLoading(false);
  //     }).catch(() => {
  //   });
  // };

  // useEffect(() => {
  //   queryOrganization();
  //   // 获取下拉框数据
  //   apis.deviceProdcut
  //     .queryNoPagin(
  //       encodeQueryParam({
  //         paging: false,
  //       }),
  //     )
  //     .then((response: any) => {
  //       if (response.status === 200) {
  //         setProductList(response.result);
  //         if (props.data) {
  //           let product = response.result.find((n: any) => n.id === props.data.productId);
  //           if (product.orgId && product.orgId != '') {
  //             queryOrganization_children({ terms: { id: product.orgId } });
  //           }
  //         }
  //       }
  //     })
  //     .catch(() => {});
  // }, []);

  return (
    <Modal
      title={`${props.data.id ? '编辑' : '新建'}设备`}
      visible
      okText="确定"
      cancelText="取消"
      onOk={() => {
        submitData();
      }}
      onCancel={() => props.close()}
    >
      <Spin spinning={loading}>
        <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
          {/* <Form.Item key="id" label="设备id">
            {getFieldDecorator('id', {
              rules: [
                { required: true, message: '请输入设备id' },
                { max: 64, message: '设备ID不超过64个字符' },
                {
                  pattern: new RegExp(/^[0-9a-zA-Z_\-]+$/, 'g'),
                  message: '设备ID只能由数字、字母、下划线、中划线组成',
                },
              ],
              initialValue: props.data.id,
            })(<Input placeholder="请输入设备id" disabled={!!props.data.id} />)}
          </Form.Item> */}
          <Form.Item key="name" label="设备名称">
            {getFieldDecorator('name', {
              rules: [
                { required: true, message: '请输入设备名称' },
                { max: 200, message: '设备名称不超过200个字符' },
              ],
              initialValue: props.data.name,
            })(<Input placeholder="请输入设备名称" />)}
          </Form.Item>
          <Form.Item key="type" label="产品类型">
            {getFieldDecorator('type', {
              rules: [{ required: true, message: '请选择产品' }],
              initialValue: props.data.type,
            })(
              <Select
                placeholder="请选择产品"
                disabled={!!props.data.id}
                showSearch
                optionFilterProp="label"
                onSelect={(value: any, option: any) => {
                  // if (option.props.data.orgId && option.props.data.opgId != '') {
                  //   queryOrganization_children({terms: {id: option.props.data.orgId}});
                  // } else {
                  //   queryOrganization();
                  // }
                }}
              >
                {(productList || []).map(item => (
                  <Select.Option
                    key={item.value}
                    value={item.value}
                    data={item.value}
                    lable={item.text}
                  >
                    {item.text}
                  </Select.Option>
                ))}
              </Select>,
            )}
          </Form.Item>
          <Form.Item key="imei" label="IMEI">
            {getFieldDecorator('imei', {
              rules: [
                { required: true, message: '请输入设备IMEI' },
              ],
              initialValue: props.data.imei,
            })(<Input placeholder="请输入设备IMEI" />)}
          </Form.Item>
          {/* <Form.Item key="orgId" label="所属机构">
            {getFieldDecorator('orgId', {
              initialValue: props.data.orgId,
            })(
              <TreeSelect
                allowClear treeDataSimpleMode showSearch
                placeholder="所属机构" treeData={organizationList}
                treeNodeFilterProp='title' searchPlaceholder='根据机构名称模糊查询'
              />
            )}
          </Form.Item> */}

          {/* <Form.Item key="describe" label="说明">
            {getFieldDecorator('describe', {
              initialValue: props.data.describe,
            })(<Input.TextArea rows={4} placeholder="请输入至少五个字符" />)}
          </Form.Item> */}
        </Form>
      </Spin>
    </Modal>
  );
};

export default connect(({ deviceProduct, loading }: ConnectState) => ({
  deviceProduct,
  loading,
}))(Form.create<Props>()(Save));
